<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    .container {
        width: 100%;
    }
</style>

<div id="category-app" class="dashboard-container">
    <div class="container">
        <div class="tableBar" style="display: inline-block;">
            <button type="button" class="el-button continue el-button--primary el-inputadd">
                <span>修改菜品分类</span>
            </button>
            <button type="button" class="el-button el-button--primary el-inputadd">
                <span>新增套餐分类</span>
            </button>
            <button type="button" class="el-button el-button--primary" id="btn-deletes">
                <span>批量删除</span>
            </button>
        </div>
        <div class="el-table tableBox el-table--fit el-table--striped el-table--enable-row-hover">
            <div class="hidden-columns">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="el-table__body-wrapper is-scrolling-none">
                <div class="box-body table-responsive no-padding">
                    <table id="menuTable" class="table table-hover">
                        <thead>
                        <tr>
                            <th data-field="selectItem" data-checkbox="true"></th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="el-table__empty-block" style="height: 100%; width: 100%;display: none">
                    <span class="el-table__empty-text">暂无数据</span>
                </div>
            </div>
            <div class="el-table__column-resize-proxy" style="display: none;"></div>
        </div>
    </div>
</div>
<script src="api/category/category.js"></script>
<script type="text/javascript" src="../bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script type="text/javascript" src="../bower_components/treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="../bower_components/treegrid/tree.table.js"></script>
<script>

    var columns = [
        {
            field : 'selectItem',
            radio : true
        },
        {
            title : '分类ID',
            field : 'id',
            align : 'center',
            valign : 'middle',
            width : '85px'
        },
        {
            title : '分类名称',
            field : 'name',
            align : 'center',
            valign : 'middle',
            width : '130px'
        },
        {
            title : '上级分类',
            field : 'parentName',
            align : 'center',
            valign : 'middle',
            sortable : true,
            width : '130px'
        },
        {
            title : '类型',
            field : 'typeType',
            align : 'center',
            valign : 'middle',
            width : '130px',
            formatter : function(item) {
                if (item.typeType == 1) {
                    return '<span class="label label-success">菜单</span>';
                }
                if (item.typeType == 2) {
                    return '<span class="label label-warning">按钮</span>';
                }
            }
        },

        {
            title : '推荐',
            field : 'typeSell',
            align : 'center',
            valign : 'middle',
            sortable : false,
            width : '130px',
            formatter:function(value) {
                if (value.typeSell == 1) {
                    return "<div onclick='changeSellBtn(this)' class='sell-btn sell-btn-common' style='background-color: " + (value.typeSell ? "#ffc200" : "#e3e3e3") + ";'>" +
                    "<div style='margin-left:" + (value.typeSell ? "26" : "5") + "px; '></div></div>"
                }
                if (value.typeSell == 0) {
                    return "<div onclick='changeSellBtn(this)' class='sell-btn sell-btn-common' style='background-color: " + (value.typeSell ? "#ffc200" : "#e3e3e3") + ";'>" +
                    "<div style='margin-left:" + (value.typeSell ? "26" : "5") + "px; '></div></div>"
                }
                if (value.typeSell == null) {
                    return "<div onclick='changeSellBtn(this)' class='sell-btn sell-btn-common' style='background-color: " + (value.typeSell ? "#ffc200" : "#e3e3e3") + ";'>" +
                        "<div style='margin-left:" + (value.typeSell ? "26" : "5") + "px; '></div></div>"
                }
            }
        },

        {
            title : '时间',
            field : 'createdTime',
            align : 'center',
            valign : 'middle',
            sortable : false,
            width : '130px'
        }];


    $(function() {
        doGetObjects();
        $(".tableBar").on("click",".el-inputadd", addPage);//添加和修改
        $("#btn-deletes").on("click",deleteItemList);//删除
        $("#load-category-id").data("isDeletePage", false);
    })

    /**
     * 删除
     */
    function deleteItemList() {
        var tipsStr = "删除";
        var confirmStr = "确认删除吗?";
        var typeType = 3;
        var checkboxs = $("tbody input[type='radio']:checked");
        var ids = [];
        for (var i = 0; i < checkboxs.length; i++) {
            ids.push(checkboxs.eq(i).val());
        }
        if(!ids.length){
            commonShowTips("请至少选择1条要删除的商品数据！");
            return;
        }
        //二次删除确认
        if(!confirm(confirmStr)){
            return;
        }
        var url = "category/deleteCategory";
        var param ={ids:ids,typeType:typeType};
        $.get(url,param,function(result){
            if(result.state == 1){
                commonShowTips("成功" + tipsStr + result.data + "条数据！");
                doGetObjects();
            }else{
                commonShowTips(result.message);
            }
        })
    }

    //推荐
    function changeSellBtn(btn) {
        debugger
        var btn = $(btn);
        var bgColor = btn.css("background-color");
        var id = btn.parents("tr").find("input[type='radio']").val();
        var typeSell = 0;
        //判断是否是不推荐的 是的话状态=1，不是的话状态=0
        if (bgColor == 'rgb(227, 227, 227)') {
            typeSell = 1;
        }
        var params = {id:id,typeSell:typeSell};
        var btnText = btn.parents("tr").children(":eq(8)").children().children().eq(0).text();
        if (btnText == '上架') {
            commonShowTips("商品处于下架状态，暂不能推荐！");
            return;
        }
        changeSell(btn, typeSell, params);
    }

    /**
     * 修改推荐状态
     * @param btn
     * @param typeSell
     * @param params
     */
    function changeSell(btn, typeSell, params) {
        var url = "category/updateSell";
        $.get(url, params, function (result) {
            commonShowTips(result.message);
            btn.css("background-color", !typeSell ? "#e3e3e3" :"#ffc200");
            btn.children().css("margin-left",  !typeSell ? "5px" : "26px");
        })
    }

    //加载数据
    function doGetObjects(){
        var tableId="menuTable";
        var url="category/doFindCategory";
        var treeTable = new TreeTable(tableId, url, columns);
        treeTable.setExpandColumn(2);
        treeTable.init();
        $(".treegrid-tbody").height(0);
    }

    //添加和修改
    function addPage(){
        if($(this).hasClass("continue")){
            var checked=$("tbody input[type='radio']:checked");
            if(!checked.length){
                commonShowTips("请选择一个");
                return;
            }
            var tr = checked.parents("tr");//拿到tr
            var param = tr.data("rowData");//拿到tr绑定的当前菜单行数据
            $("#cIframe").data("rowData",param);//绑定到大盒子中
        }
        var url = "category/add";
        $("#cIframe").load(url,function(){

        })
    }

</script>